<template>
  <div class="merchant-list">
    <page-header
      v-bind="merchantHeaderConfig"
      @searchClick="searchClick"
      @resetClick="resetClick"
    />
    <page-content
      ref="pageContentRef"
      v-bind="merchantContentConfig"
      :single-btn-config="singleBtnConfig"
      @singleBtnClick="singleBtnClick"
      @confirmClick="handleConfirmClick"
      @cancelClick="handleCancelClick"
    >
      <template #certificationImageList="row">
        <el-image
          style="width: 120px; height: 120px"
          :src="row[row.prop] && row[row.prop][0]"
          preview-teleported
          :preview-src-list="row[row.prop]"
          :initial-index="0"
          fit="cover"
        />
      </template>
      <template #userInfo="row">
        <div class="user">
          <el-button
            size="small"
            plain
            text
            bg
            :type="row.sex ? 'primary' : 'danger'"
            >{{ row.sex ? '男' : '女' }}
          </el-button>
          <div class="userinfo">
            <div>账号：{{ row.userName }}</div>
            <div>手机号：{{ row.userPhone }}</div>
            <div>紧急联系人：{{ row.emergencyContact }}</div>
            <div>邮箱：{{ row.email }}</div>
            <div>身份证：{{ row.identityCard }}</div>
          </div>
        </div>
      </template>
      <template #storeInfo="row">
        <div class="store-info">
          <div>店铺名：{{ row.storeName }}</div>
          <div>经营类型：{{ row.typeName }}</div>
          <div>
            <el-button
              size="small"
              plain
              text
              bg
              :type="row.storeType ? 'success' : 'warning'"
              >{{ row.storeType ? '企业店铺' : '个人店铺' }}
            </el-button>
          </div>
          <div>
            <el-button
              v-if="row.storeType === 1"
              size="small"
              plain
              text
              bg
              :type="storeCompanyTypeColor(row.storeCompanyType)"
              >{{ storeCompanyTypeText(row.storeCompanyType) }}
            </el-button>
          </div>
        </div>
      </template>
      <template #bankType="row">
        <el-button
          size="small"
          plain
          text
          bg
          :type="bankTypeColor(row[row.prop])"
          >{{ bankTypeText(row[row.prop]) }}
        </el-button>
      </template>
      <template #earnestPayStatus="row">
        <el-button
          size="small"
          plain
          text
          bg
          :type="row[row.prop] ? 'success' : 'danger'"
          >{{ row[row.prop] ? '已支付' : '未支付' }}
        </el-button>
      </template>
      <template #status="row">
        <el-switch
          @click="changeSwitchStatus(row)"
          :model-value="!!row.status"
        />
      </template>
    </page-content>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import PageHeader from '@/components/page-header/page-header.vue'
import merchantHeaderConfig from '@/views/main/system/merchant/merchantList/config/header-config'
import PageContent from '@/components/page-content/page-content.vue'
import merchantContentConfig from '@/views/main/system/merchant/merchantList/config/content-config'
import usePageHeader from '@/hooks/use-page-header'
import { SingleBtns } from '@/global/constant'
import { useUserStore } from '@/store'
import type { SingleBtnType } from '@/global/types'

// 计算属性
const bankTypeText = computed(() => {
  return (num: number) => {
    let text
    num === 0 && (text = '中国工商银行')
    num === 1 && (text = '中国农业银行')
    num === 2 && (text = '中国银行')
    num === 3 && (text = '中国建设银行')
    num === 4 && (text = '中国交通银行')
    return text
  }
})
const bankTypeColor = computed(() => {
  return (num: number) => {
    let color
    num === 0 && (color = 'primary')
    num === 1 && (color = 'info')
    num === 2 && (color = 'danger')
    num === 3 && (color = 'warning')
    num === 4 && (color = 'success')
    return color
  }
})
const storeCompanyTypeText = computed(() => {
  return (num: number) => {
    let text
    num === 0 && (text = '普通店')
    num === 1 && (text = '专营店')
    num === 2 && (text = '专卖店')
    num === 3 && (text = '旗舰店')
    return text
  }
})
const storeCompanyTypeColor = computed(() => {
  return (num: number) => {
    let color
    num === 0 && (color = 'primary')
    num === 1 && (color = 'info')
    num === 2 && (color = 'danger')
    num === 3 && (color = 'warning')
    return color
  }
})

// ============================= page-header ===============================
const { pageContentRef, searchClick, resetClick } = usePageHeader()

// ============================= page-content ================================
const singleBtnConfig = ref()
const userStore = useUserStore()
// 子传父
// 0.点击表单框的确定按钮
const handleConfirmClick = () => {
  singleBtnConfig.value = null
}

const handleCancelClick = () => {
  singleBtnConfig.value = null
}

// 封禁/解封账号：单数据操作
const changeSwitchStatus = (row: any) => {
  // 如果当前为true那就去禁用账号, 反之解封账号
  if (row.status) {
    pageContentRef.value?.setCurBtnType(SingleBtns.Banned)
    pageContentRef.value?.setModalStatus(true)
    pageContentRef.value?.setCurRow(row)
  } else {
    userStore.reqUntieDisableUserAction('user', row.userId, 'merchant')
  }
}

// 1.点击单操作按钮
const singleBtnClick = async (type: SingleBtnType) => {
  if (SingleBtns.Add === type || SingleBtns.Edit === type) {
    // 1.1新增和编辑用同一套配置
    // singleBtnConfig.value = modalEditAndAddConfig
  }
  // 这里可能完善起来要根据按钮是否能打开对话框，这里写死了
  pageContentRef.value?.setModalStatus(true)
}
</script>

<style scoped>
.merchant-list {
}

.user {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 10px;
  //justify-content: flex-start;
}
</style>
